<template>
  <view>
    <u-popup
      class="custom-popup"
      v-model="show"
      :zoom="false"
      mode="bottom"
      width="100%"
      height="730rpx"
      :mask-custom-style="{
        background: 'rgba(0, 0, 0, 0.5)',
      }"
    >
      <view class="content">
        <view class="box">
          <view class="title">
            <text>{{ wordData.word }}</text>
          </view>
          <view class="word">
            <view class="word_text end">
              【
              <text v-for="(item, index) in wordData.segList" :key="index">
                {{ item.ipaUs }}
              </text>
              】
            </view>
            <view class="word_icon" @click="play()">
              <image
                src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/hengxiao/common/luyin.png"
                mode="scaleToFill"
              />
            </view>
            <view class="word_text start">
              <text>{{ wordData.wordParaphrase }}</text>
            </view>
          </view>
          <view class="phonetic">
            <view
              class="phonetic_item"
              v-for="(item, index) in wordData.wordRootList"
              :key="index"
            >
              <view class="phonetic_text">
                <text>{{ item.name }}</text>
              </view>
              <view class="phonetic_text">
                <text>{{ item.parse }}</text>
              </view>
            </view>
          </view>
          <view class="btn">
            <view class="btn_content" @click="back()">
              <text>返回</text>
            </view>
          </view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
const englishAudioContext = uni.createInnerAudioContext();
englishAudioContext.autoplay = true;
export default {
  components: {},
  props: {
    wordData: {
      type: Object,
      default: null,
    },
  },
  data() {
    return {
      show: false,
    };
  },
  mounted() {},
  methods: {
    open() {
      this.show = true;
    },
    back() {
      this.show = false;
    },
    play() {
      if (!englishAudioContext.paused) return;
      englishAudioContext.src = this.wordData.sentence.sentenceAudio;
      englishAudioContext.play();
    },
  },
};
</script>

<style lang="scss" scoped>
@import "./SplitPronunciationPopup";
</style>
